<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test watchJS</title>
  <script src="../js/watch.js"></script>
</head>

<body>
  <div>主要测试 watchJS功能</div>
  <button type="button" onclick="test1()">监听对象变化</button>
  <button type="button" onclick="test2()">监听字符串变化</button>
  <button type="button" onclick="test3()">监听类型变化</button>
  <button type="button" onclick="test4()">监听局部函数变化</button>
  <div>引入方式如下:</div>
  <div>
    <b>HTML Script TAG</b>
    <xmp>
      <script src="watch.js" type="text/javascript"></script>
    </xmp>
  </div>
  <div>
    <b>Import as ECMA2015 module</b>
    <br>
    <pre>
      import WatchJS from 'melanke-watchjs';
      var watch = WatchJS.watch;
      var unwatch = WatchJS.unwatch;
      var callWatchers = WatchJS.callWatchers;
    </pre>
  </div>

  <div>
    <b>Require</b>
    <br>
    <pre>
      var WatchJS = require("melanke-watchjs")
      var watch = WatchJS.watch;
      var unwatch = WatchJS.unwatch;
      var callWatchers = WatchJS.callWatchers;
    </pre>
  </div>
  <div>
    <b>RequireJS</b>
    <br>
    <pre>
      require("watch", function(WatchJS){
      var watch = WatchJS.watch;
      var unwatch = WatchJS.unwatch;
      var callWatchers = WatchJS.callWatchers;
      });
    </pre>
  </div>
  <hr>
  <div>监听对象案例：</div>
  <pre>
    var ex1 = {
    attr1: "initial value of attr1",
    attr2: "initial value of attr2"
    };

    //defining a 'watcher' for an attribute
    watch(ex1, "attr1", function(){
    alert("attr1 changed!");
    });

    //when changing the attribute its watcher will be invoked
    ex1.attr1 = "other value";
  </pre>
  <div>监听属性案例：</div>
  <pre>
    window.testObj = []
    //defining a 'watcher' for an attribute
    watch(window, "testObj", function () {
    alert("testObj changed!" + testObj);
    });

    //when changing the attribute its watcher will be invoked
    testObj.push("123");
    testObj = "qweqweqw";
  </pre>
  <script>
    function test1() {
      //defining our object however we like
      var ex1 = {
        attr1: "initial value of attr1",
        attr2: "initial value of attr2"
      };

      //defining a 'watcher' for an attribute
      watch(ex1, "attr1", function () {
        alert("attr1 changed!");
      });

      //when changing the attribute its watcher will be invoked
      ex1.attr1 = "other value";
    }

    function test2() {
      //defining our object however we like
      window.testObj = "123"
      //defining a 'watcher' for an attribute
      watch(window, "testObj", function () {
        alert("testObj changed!" + testObj);
      });

      //when changing the attribute its watcher will be invoked
      window.testObj = "new value";
    }

    function test3() {
      //defining our object however we like
      window.testObj = []
      //defining a 'watcher' for an attribute
      watch(window, "testObj", function () {
        alert("testObj changed!" + testObj);
      });
      //when changing the attribute its watcher will be invoked
      testObj.push("123");
      testObj = "qweqweqw";
    }

    function test4() {
      let aaa = []
      watch(this, "aaa", function () {
        alert("test4 changed!" + testObj);
      });
      aaa.push("123");
      aaa = "qweqweqw";
      console.log("window", window)
      console.log("aaa", aaa)
    }

  </script>
</body>

</html>
